import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/index/Home.vue'
import RegistView from '../views/RegistView.vue'
import LoginView from '../views/LoginView.vue'
import SearchView from '../views/search/SearchView.vue'
import CategoryShop from '../views/CategoryShop.vue'
import OrderView from '../views/OrderView.vue'
import PersonalView from '../views/PersonalView.vue'
import Shop from '../views/shop/ShopView.vue'
import OrderDetailView from '../views/OrderDetailView.vue'
import RatingAdd from '../views/RatingAdd.vue'
import ShopInfo from '../components/shop/ShopInfo.vue'
import AddressList from '../views/address/AddressList.vue'
import AddressEdit from '../views/address/AddressEdit.vue'
import AddressAdd from '../views/address/AddressAdd.vue'
import NotFound from '../views/NotFound.vue'
import Components from '../components/Comments.vue'
import { Toast } from 'vant'
import ApealView from '../views/ApealView.vue'
import PersonalEditView from '../views/PersonalEditView.vue'
import CartOrder from '../views/CartOrder.vue'
import OrderSubmitView from '../views/OrderSubmitView.vue'
import OrderThinkView from '../views/OrderThinkView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/', //路由地址，用户访问这个地址  首页
      name: 'home', //路由的名字，唯一
      component: Home, //路由需要跳转的目标组件
    },
    {
      path: '/home', //路由地址，用户访问这个地址  首页
      name: '主页', //路由的名字，唯一
      component: Home, //路由需要跳转的目标组件
    },
    {
      path: '/regist', //注册页面的路由地址
      name: 'regist', //路由的名字，唯一
      component: RegistView //路由需要跳转的目标组件
    },
    {
      path: '/login', //注册页面的路由地址
      name: 'login', //路由的名字，唯一
      component: LoginView //路由需要跳转的目标组件
    },
    {
      path: '/search', //搜索页面的路由地址
      name: 'search', //路由的名字，唯一
      component: SearchView, //路由需要跳转的目标组件
    },
    {
      path: '/store/categoryshop/:categoryId',//分类下页面的路由地址
      name: 'categoryshop',
      component: CategoryShop,
      props: true,
    },
    {
      path: '/order', //订单页面的路由地址
      name: 'order', //路由的名字，唯一
      component: OrderView, //路由需要跳转的目标组件
      meta:{  //该页面必须登录才能使用
        isAuth: true,
      }
    },
    {
      path: '/order/detail/:orderId', //订单详情页面的路由地址
      name: 'orderDetail', //路由的名字，唯一
      component: OrderDetailView, //路由需要跳转的目标组件
      // meta:{  //该页面必须登录才能使用
      //   isAuth: true,
      // }
    },
    {
      path: '/order/apeal/:orderId', //申诉页面的路由地址
      name: 'apeal', //路由的名字，唯一
      component: ApealView, //路由需要跳转的目标组件
    },
    {
      path: '/user', //个人信息页面的路由地址
      name: 'user', //路由的名字，唯一
      component: PersonalView, //路由需要跳转的目标组件
      meta:{  //该页面必须登录才能使用
        isAuth: true,
      }
    },
    {
      path: '/user/edit/userId:', //商家店铺编辑页面的路由地址
      name: 'edit', //路由的名字，唯一
      component: PersonalEditView //路由需要跳转的目标组件
    },
    {
      path: '/ratingadd', //个人信息页面的路由地址
      name: 'ratingadd', //路由的名字，唯一
      component: RatingAdd //路由需要跳转的目标组件
    },
    {
      path: '/shop/:storeid', //商家店铺页面的路由地址
      name: 'shop', //路由的名字，唯一
      component: Shop, //路由需要跳转的目标组件
      props: true, //将 params 中的数据赋值给 props 
    },
    {
      path: '/shopinfo', //商家店铺详细页面的路由地址
      name: 'shopinfo', //路由的名字，唯一
      component: ShopInfo //路由需要跳转的目标组件
    },
    {
      path: '/address/:userId', //地址列表页面的路由地址
      name: 'addresslist', //路由的名字，唯一
      component: AddressList, //路由需要跳转的目标组件
      props: true,
    },
    {
      path: '/addressedit/:addressId', //地址修改页面的路由地址
      name: 'addressedit', //路由的名字，唯一
      component: AddressEdit, //路由需要跳转的目标组件
      props: true,
    },
    {
      path: '/addressadd/:userId', //地址增加页面的路由地址
      name: 'addressadd', //路由的名字，唯一
      component: AddressAdd, //路由需要跳转的目标组件
      props: true,
    },
    {
      path: '/shop/rating/:goodId', //查看菜品评论的路由地址
      name: 'rating', //路由的名字，唯一
      component: Components, //路由需要跳转的目标组件
    },
    { 
      path: '/:path(.*)', //404页面
      component: NotFound //路由需要跳转的目标组件
    },
    {
      path: '/cartorder/:storeId', //查看菜品评论的路由地址
      name: 'cartorder', //路由的名字，唯一
      component: CartOrder, //路由需要跳转的目标组件
      props:true,
      meta:{  //该页面必须登录才能使用
        isAuth: true,
      }
    },
    {
      path: '/ordersubmit', //商家店铺详细页面的路由地址
      name: 'OrderSubmitView', //路由的名字，唯一
      component: OrderSubmitView //路由需要跳转的目标组件
    },
    {
      path: '/orderthink', //商家店铺详细页面的路由地址
      name: 'OrderThinkView', //路由的名字，唯一
      component: OrderThinkView //路由需要跳转的目标组件
    },
  ]
});

//判断，在进入每一个导航之前，判断用户有没有登录，如果没有登录，则不能进入，并跳转至登录页面；
router.beforeEach((to, from, next) => {
  console.log('全局前置守卫 - ', to, from, next);
  const { token } = localStorage;
  if (to.meta.isAuth && !token) { 
    //当 isAuth 为true时，而且未登录的情况，进行处理；
    Toast('请先登录！')
    next({ path: '/login', query: { redirect: to.fullPath } });
  } else {
    next();
  }
});


export default router
